<template>
  <div class="wrap">
    <div class="top container">
      <div class="left">
        <div class="imgBox">
          <img src="	http://erabbit.itheima.net/img/logo.0940ebb5.png" class="img" alt="">
        </div>
      </div>
      <div class="right">
        点击进入首页》》
      </div>
    </div>
    <div class="main">
       <div class="loginBox">
        <div class="title">
        <h2 class="z">账号密码登录</h2>
        <h2>|</h2>
        <h2>扫码登录</h2>
      </div>
      <div class="zh">
        账号:<input type="text" value="demo">
      </div>

      <div class="mm">
        密码:<input type="password" value="123456">
      </div>
      <div>
        <button @click="removeToken" class="but" v-if="this.$store.state.login.token">退出登录</button>
        <button @click="getToken" class="but" v-else>登录</button>
      </div>
    </div>
       </div>
  </div>
</template>

<script>
import {getLogin} from "@/apis/login"
import {mapMutations} from "vuex"
export default{
    methods:{
      ...mapMutations({mSave:"login/saveToken"}),
      ...mapMutations({rSave:"login/removeToken"}),
      async getToken(){
        let res = await getLogin()
        if(res.code==1) {
          this.mSave(res.result.token)
          this.$router.push({path:"/"})
        }
      },
      removeToken(){
        localStorage.removeItem("store")
        this.rSave("")
        this.$router.push({path:"/"})

      }
    }
}

</script>

<style lang="scss" scoped>
.wrap{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f6f6f6;
}
.top {
  display: flex;
  height: 240px;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 240px;

    .img {
      display: block;
      width: 300px;
      margin: auto 0;
    }
  }
}

.main {
  width: 100%;
  height: 488px;
  position: relative;
  background: url("http://erabbit.itheima.net/img/login-bg.696efec3.png") center center;
  background-size: cover;
  .loginBox{
         width: 440px;
         height: 460px;
         padding: 20px;
         background-color: #fff;
         position: absolute;
         top: 58px;
         right: 20%;
         .title{
          display: flex;
          height: 40px;
          justify-content: space-around;
          align-items: center;
          .z{
            color: #27ba9b;
          }
         }
         .zh,.mm{
          width: 100%;
          height: 40px;
          margin-top: 20px;
          border: 0.5px solid #999;
          display: flex;
          align-items: center;
          padding: 0 10px;
          input{
            margin-left: 10px;
          }
         }
         .but{
             width:100% ;
             height: 40px;
             margin-top: 40px;
             background-color: #27ba9b;
             border: 0;
             font-size: 18px;
             color: #fff;
         }
  }
}</style>